<template>
	<div class="GameDetailList">
    <template v-if='list'>
      <div 
        v-for='(item,index) in list'
      >
        <h3 class="date">{{ item.date}}</h3>
        <ul>
          <li 
            v-for='(items,index) in item.array'
            class="match"
            @click='godetails(items.mid)'
          >
              <div class="left">
                <img alt="" :src="getImgUrl(items.hig)" :onerror="noImg"> 
                <p>{{ items.hz }}</p>
              </div> 
              <div class="middle">
                <p>{{ currentleagueName }}&nbsp;{{ items.mt}}</p> 
                <template v-if='items.sts == "notstarted"'>
                  <p>vs</p>
                </template>
                <template v-else>
                  <p>{{items.hm_fs}}&nbsp;-&nbsp;{{ items.aw_fs }}</p> 
                </template>
                <p>
                  <i v-if='items.sts == "inprogress"' class="redColor">进行中</i>
                  <i v-else-if='items.sts == "notstarted"' class="redColor">未开始</i>
                  <i v-else-if='items.sts == "finished"'  class="redColor">已结束</i>
                  <i v-else>取消</i>
                </p>
              </div> 
              <div class="right">
                <img alt="" :src="getImgUrl(items.aig)" :onerror="noImg"> 
                <p>{{ items.az }}</p>
              </div>
          </li>
        </ul>
      </div>
    </template>
    <div v-else class="noData">暂无数据！</div>
       
	</div>
	
</template>
<script>
	export default{
		name:'GameDetailList',
		props:{
      list:Array,
      currentleagueName:String
    },
    data:function(){
      return {
        noImg:'this.src="/static/img/soccerbig.png"',
      }
    },
    methods:{
      getImgUrl:function(_url) {
        return _url
      },
      godetails(id){
        this.$router.push('/GameDetail/'+id)
      }
    },
    updated(){
      $(window).scrollTop(0)
    }
	};
</script>
<style lang="less" scoped>
	@import '~styles/varibles.less';
  .GameDetailList{
    margin-top:1.9rem;
  }
  .GameDetailList li{
    overflow: hidden;
    display: flex;
    justify-content: space-around;
  }
  .GameDetailList .date{
      height: 30px;
      line-height: 30px;
      font-size: 12px;
      width: 100%;
      background: #F5F5F5;
      text-align: center;
      font-weight: bold;
  }
  .GameDetailList .match{
      height: 100px;
      width: 100%;
      border-bottom: 1px solid #e6e6e6;
  }
  .GameDetailList .match .left,
  .GameDetailList .match .right{
      width: 38%;
      height: 100px;
  }
  .GameDetailList .match .middle{
      width: 24%;
      height: 100%;
  }
  .GameDetailList .match .left img,
  .GameDetailList .match .right img{
      display: block;
      margin: 20px auto 0;
      height: 40px;
      width: 40px;
  }
  .GameDetailList .match .left p,
  .GameDetailList .match .right p{
      font-size: 12px;
      line-height: 20px;
      text-align: center;
  }
  .GameDetailList .match .middle p:first-child{
      color: #999;
      text-align: center;
      font-size: 12px;
      line-height: 12px;
      margin-top: 10px;
  }
  .GameDetailList .match .middle p:nth-child(2){
      font-size: 20px;
      line-height: 20px;
      margin-top: 16px;
      text-align: center;
  }
  .GameDetailList .match .middle p:nth-child(3){
      font-size: 12px;
      line-height: 12px;
      margin-top: 16px;
      text-align: center;
      color: #E30613;
  }
</style>